<template>
	<view class="content page-shop">
		<!-- #ifdef APP-PLUS -->
		<view class="status-bar--blank"></view>
		<!-- #endif -->
		<view class="shop-head">
			<view class="shop-head__title">积分商城</view>
			<view class="shop-head__money">
				<!-- <image src="../../static/banner1.png"></image> -->
				<text>环保金</text>
				<text class="amount">0.90</text><text>元</text>
			</view>
		</view>

		<!-- <view class="textdot">看的积分换会计师9999999999999999999999994kffffffffffffff对福建省的粉红色的尽快发货肯定就是发货速度快解放后速度快解放后速度快解放后谁看得见发货速度快解放后思考积分兑换按时客户经理卡收到货侃大山</view> -->

		<view class="swiper-wrapper">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :duration="500">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/banner1.png"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/banner2.png"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="product-list">
			<view class="product-list__item" v-for="(item, index) in products" :key="index" 
				@tap="toDetail(item.id)">
				<image :src="item.image" lazy-load mode="widthFix"></image>
				<view class="name">
					<text>{{item.name}}</text>
				</view>
				<view class="price">
					<text class="price-num">{{item.price}}</text>
					<text>环保金</text>
				</view>
			</view>
			<view class="uni-loadmore" v-if="showLoadMore">
				<text>{{loadMoreText}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				max: 0,
				products: [],
				loadMoreText: "加载中...",
				showLoadMore: false,
				images: []
			}
		},
		onLoad() {
			this.images = [
				'https://hbimg.huabanimg.com/893035d5a9ce1b8d350289819704fdc320f4e002437f1-WsL5B2_sq236bl4',
				'https://hbimg.huabanimg.com/ceec84000b40b37de8a61e5a39876a89bc421adc16bbc8-3sxlrR_sq236bl4',
				'https://hbimg.huabanimg.com/9d0905ae4b61bd1449512523722c27484d4cb0d123e44-jRHbW4_sq236bl4',
				'https://hbimg.huabanimg.com/ad47f81c745b7e691940b908d6fd3f5e20a4723c36cb9-zyfaS2_sq236bl4',
				'https://hbimg.huabanimg.com/9eac66c05e3ae717cb4b16a5363043df38a9d3eb1fad3-YYJtqZ_sq236bl4',
				'https://hbimg.huabanimg.com/0d5dbc3751323d49de9b84527bcab9d7a0c8c91cc911-wC1Vwi_sq236bl4',
				'https://hbimg.huabanimg.com/910836966d6f48c7670e91205839cc08c22fe36414be2-hWUqZW_sq320',
				'https://hbimg.huabanimg.com/68413cfdb7c3ab3e55535da38407ef98977277feba0c-VxAgUh_sq320',
				'https://hbimg.huabanimg.com/dc3db022829f3b5b8bf66487b1b1e8a7474ce5fa7dee4-aCUcf1_sq320',
				'https://hbimg.huabanimg.com/2b63bb5dfdb40f70e166f88131ed851c44dd173d1461b-c4xqPW_sq320',
				'https://hbimg.huabanimg.com/b1f2f01d693083261d1082584c5cf9648534825edec-BxdaU5_sq320',
				'https://hbimg.huabanimg.com/c51b887f43a485a932b24f64f6b31740040a651b88ac9-BdgfLO_sq320',
				'https://hbimg.huabanimg.com/1138b8db215ba616c6e1ae2aeb97e57c54c4bb1118126-YqcXnD_sq320',
				'https://hbimg.huabanimg.com/e3be36ba04acd6ed88d65399bd533f1faa9259f21aa5e-yW64fW_sq320',
				'https://hbimg.huabanimg.com/c7f962b3b59801f606d0a078a795fbb0dc87e8097619-MFXZGi_sq320',
				'https://hbimg.huabanimg.com/bc48370c6cdcb79dccd30869c7ff0e288ed0f9de149bd-HxnSFK_sq320',
				'https://hbimg.huabanimg.com/893035d5a9ce1b8d350289819704fdc320f4e002437f1-WsL5B2_sq236bl4',
				'https://hbimg.huabanimg.com/ceec84000b40b37de8a61e5a39876a89bc421adc16bbc8-3sxlrR_sq236bl4',
				'https://hbimg.huabanimg.com/9d0905ae4b61bd1449512523722c27484d4cb0d123e44-jRHbW4_sq236bl4',
				'https://hbimg.huabanimg.com/ad47f81c745b7e691940b908d6fd3f5e20a4723c36cb9-zyfaS2_sq236bl4',
				'https://hbimg.huabanimg.com/9eac66c05e3ae717cb4b16a5363043df38a9d3eb1fad3-YYJtqZ_sq236bl4',
				'https://hbimg.huabanimg.com/0d5dbc3751323d49de9b84527bcab9d7a0c8c91cc911-wC1Vwi_sq236bl4',
				'https://hbimg.huabanimg.com/910836966d6f48c7670e91205839cc08c22fe36414be2-hWUqZW_sq320',
				'https://hbimg.huabanimg.com/68413cfdb7c3ab3e55535da38407ef98977277feba0c-VxAgUh_sq320',
				'https://hbimg.huabanimg.com/dc3db022829f3b5b8bf66487b1b1e8a7474ce5fa7dee4-aCUcf1_sq320',
				'https://hbimg.huabanimg.com/2b63bb5dfdb40f70e166f88131ed851c44dd173d1461b-c4xqPW_sq320',
				'https://hbimg.huabanimg.com/b1f2f01d693083261d1082584c5cf9648534825edec-BxdaU5_sq320',
				'https://hbimg.huabanimg.com/c51b887f43a485a932b24f64f6b31740040a651b88ac9-BdgfLO_sq320',
				'https://hbimg.huabanimg.com/1138b8db215ba616c6e1ae2aeb97e57c54c4bb1118126-YqcXnD_sq320',
				'https://hbimg.huabanimg.com/e3be36ba04acd6ed88d65399bd533f1faa9259f21aa5e-yW64fW_sq320',
				'https://hbimg.huabanimg.com/c7f962b3b59801f606d0a078a795fbb0dc87e8097619-MFXZGi_sq320',
				'https://hbimg.huabanimg.com/bc48370c6cdcb79dccd30869c7ff0e288ed0f9de149bd-HxnSFK_sq320',
			];
			this.setProducts()
		},
		onReachBottom() {
			console.log("onReachBottom");
			this.loadProducts()
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.max = 0;
			this.products = [];
			this.loadMoreText = "加载中...";
			this.showLoadMore = false;
			this.setProducts();
		},
		onUnload() {
			console.log('onUnload');
			this.max = 0;
			this.products = [];
			this.loadMoreText = "加载中...";
			this.showLoadMore = false;
		},
		methods: {
			toDetail(id) {
				this.commonJs.navigateTo(`/pages/shop/productDetail?id=${id}&name=经济`);
			},
			setProducts() {
				setTimeout(() => {
					this.max = 0;
					this.products = [];
					let products = [];
					this.max += 10;
					for (let i = this.max - 10; i < this.max; i++) {
						products.push({
							id: `${i}`,
							name: `定制分类垃圾桶${i}`,
							image: this.images[i],
							price: `${i+1}${i+1}.00`
						})
					}
					this.products = this.products.concat(products);
					uni.stopPullDownRefresh();
				}, 300);
			},
			loadProducts() {
				if (this.max >= 30) {
					this.loadMoreText = "没有更多数据了!"
					return;
				}
				this.showLoadMore = true;

				setTimeout(() => {
					let products = [];
					this.max += 10;
					for (let i = this.max - 10; i < this.max; i++) {
						products.push({
							id: `${i}`,
							name: `定制分类垃圾桶${i}`,
							image: this.images[i],
							price: `${i+1}${i+1}.00`
						});
					}
					this.products = this.products.concat(products);
				}, 300);
			}
		}
	}
</script>


<style>
	@import url("../../css/shop/shop.css");

	.textdot {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-wrap: break-word;
		word-break: break-all;
		line-height: 24px;
		height: 48px;
	}
</style>
